<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            /*从列表中删除项目符号以及外边距和内边距填充 */
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            border: 1px solid #555;
            position: fixed;
            height: 100%;
            overflow: auto;
        }

        li a {
            /*将链接显示为块元素以便整个链接区域都可以被点击 width 默认情况下块元素会占用全部可用宽度,可以指定宽度*/
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        /*text-align:center 添加到li标签中使得链接居中 border在导航栏外添加边框,*/
        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        /*鼠标悬停时改变链接颜色*/
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }

        /*标记当前选择的链接,以便用户知道他在哪个页面*/
        .active {
            background-color: #4CAF50;
            color: white;
        }

        /*添加居中链接以及边框*/
        li:last-child {
            border-bottom: none;
        }
        .sul{
          list-style-type: none;
          margin: 0;
          padding: 0;
        }
        .sli{
          display: inline;
        }
    </style>
</head>
<!--
导航栏
垂直导航栏
水平导航栏
导航栏需要标准html作为基础  导航栏=链接列表
导航栏基本上就是链接列表 因此使用 ul和li元素会很有意义
list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。
display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），
我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

水平导航栏
  有两种创建水平导航栏的方法 使用行内或浮动列表项




参数
      display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
      list-style-type: none;
      margin: 0;
      padding:0; 删除浏览器的默认设置。
      width: 25%; 宽度
      background-color: #f1f1f1;  背景颜色
      border: 1px solid #555; 边框
      position: fixed; 固定内容不滚动
      height: 100%;  全高
      overflow: auto; 如果侧栏的内容太多,则启用滚动条
      text-align:center 添加到 <li> 或 <a>，使链接居中
-->
<body>
<div class="dhl">
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="news">News</a></li>
        <li><a href="contact">Contact</a></li>
        <li><a href="about">About</a></li>
    </ul>
    <!--  <p class="note"><span>注释: </span>我们将 href="#" 用于测试链接。在实际的网站中，用的是 URL。</p>-->
    <div style="margin-left:25%;padding:1px 16px;height:1000px;">
        <h1>全高的固定侧导航栏</h1>
        <h2>请尝试滚动此区域，并查看 sidenav 如何粘在页面上。</h2>
        <p>请注意，此 div 元素的左外边距为 25％。这是因为侧导航栏被设置为 25％ 宽。如果删除这个外边距，则 sidenav 将叠加到该
            div 上。</p>
        <p>还要注意，我们已为 sidenav 设置 overflow：auto。如果 sidenav 太长时（例如，如果其中有超过 50
            个链接），会添加滚动条。</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
        <p>Some text..</p>
    </div>
</div>
<div class="shl">
    <ul class="sul">
        <li class="sli"><a class="sa" href="#home">Home</a></li>
        <li class="sli"><a class="sa" href="news">News</a></li>
        <li class="sli"><a class="sa" href="contact">Contact</a></li>
        <li class="sli"><a class="sa" href="about">About</a></li>
    </ul>
</div>
</body>
</html>
